<template>
  <div class="echarts_box">
    <div class="echarts_box" ref="echarts_box" :style="{ opacity: data.length == 0 ? '0' : '1' }"></div>
    <!---------------------- 无数据是显示 ---------------------->
    <Nodata class="Nodata" v-show="data.length == 0"></Nodata>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  props: {
    data: {
      // 返回的数据
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  computed: {
    ...mapGetters(["echartsColor"]),
  },
  watch: {
    echartsColor: "drawLine", // 数值变化是更新图表
    data: "drawLine", // 数值变化是更新图表
  },
  mounted() {
    // this.drawLine();
  },
  methods: {
    drawLine() {
      try {
        this.$nextTick(() => {
          var _this = this;
          var myChart = _this.$echarts.init(_this.$refs.echarts_box);
          // let data1 = [
          //   "供应商1",
          //   "供应商2",
          //   "供应商3",
          //   "供应商4",
          //   "供应商5",
          //   "供应商6",
          //   "供应商8"
          // ];
          let data2 = this.data;
          var colorList = [
            "#7DEBFF",
            "#5FE48E",
            "#9085FF",
            "#F9D172",
            "#85C9FF",
            "#9085FF",
            "#F9D172",
            "#85C9FF",
            "#7DEBFF",
            "#5FE48E",
            "#9085FF",
            "#23C3FF",
            "#00EBCD",
            "#00C13B",
            "#CEAE00",
            "#FE6F37",
            "#FC2A2A",
            "#5470C6",
            "#73C0DE",
            "#FAC657",
            "#91CC75",
            "#EE6666",
            "#5470C6",
            "#73C0DE",
            "#FAC657",
            "#91CC75",
            "#EE6666",
            "#5470C6",
            "#73C0DE",
            "#FAC657",
            "#91CC75",
            "#EE6666",
            "#5470C6",
            "#73C0DE",
            "#FAC657",
            "#91CC75",
            "#EE6666",
          ];
          let option = {
            tooltip: {
              trigger: "item",
              formatter: " {b} : {c} ({d}%)",
            },
            legend: {
              // formatter: function (name) {
              //   var data = option.series[0].data;
              //   var total = 0;
              //   var tarValue;
              //   for (var i = 0; i < data.length; i++) {
              //     total += data[i].value;
              //     if (data[i].name == name) {
              //       tarValue = data[i].value;
              //     }
              //   }
              //   var p = Math.round((tarValue / total) * 1000) / 10;
              //   return `   ${name}     ${p}%`;
              // },

              orient: "vertical",
              // left: "65%",
              width: "50%",
              right: "0%",
              top: "center",
              itemWidth: 13,
              itemHeight: 11,
              type: "scroll",
              // data: data1,
              textStyle: {
                color: this.echartsColor,
                fontSize: 11,
                // rich:{
                //     a:
                // }
              },
              // orient: 'bottom',
              itemGap: 4,
              // icon: "circle",
              formatter: function (text) {
                var strlength = text.length;
                if (strlength % 6 != 0) {
                  text = text.replace(/\S{6}/g, function (match) {
                    // console.log(match);
                    return match + " " + "\n";
                  });
                } else {
                  text = text.replace(/\S{6}/g, function (match) {
                    // console.log(match);
                    return match + "\n";
                  });
                  strlength = text.length;
                  text = text.substring(0, strlength - 1);
                }
                return text;
              },
            },

            series: [
              {
                name: "访问来源",
                type: "pie",
                radius: "65%",
                center: ["40%", "50%"],
                data: data2,
                // roseType: "radius",
                // startAngle: 220,
                roseType: true,
                label: {
                  show: false,
                },
                itemStyle: {
                  normal: {
                    color: function (params) {
                      return new _this.$echarts.graphic.LinearGradient(
                        1,
                        0,
                        0,
                        0,
                        [
                          {
                            //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                            offset: 1,
                            color: colorList[params.dataIndex],
                          },
                        ]
                      );
                      // return colorList[params.dataIndex % colorList.length];
                    },
                  },
                },
              },
            ],
          };
          myChart.setOption(option);
          myChart.off("click");
          /* 点击事件 */
          myChart.on("click", (params) => {});
          /* 大小自适应 */
          window.addEventListener("resize", function () {
            myChart.resize();
          });
          myChart.resize();
        });
      } catch (e) {
        // 错误处理代码片段
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.echarts_box {
  width: 100%;
  height: 100%;
  position: relative;
  .Nodata {
    position: absolute;
    top: 0;
    z-index: 10;
  }
}
</style>